<%@ page language="java" import="java.util.*,org.model.Adcg" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>大家好我是拷贝忍者！Mir.刘</title>
		<c:if test="${adcg.model=='article'||adcg.model=='product' }">
			<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
			<link href="css/froala_editor.min.css" rel="stylesheet" type="text/css">
		    <style>
		        body {
		            text-align: center;
		        }
		        section {
		            width: 80%;
		            margin: auto;
		            text-align: left;
		        }
		        #editor .control{
			        font-size: 1.5em;
				    padding: .3em .3em;
				    width: 49%;
				    border: none;
				    text-transform: capitalize;
				    outline: none;
				    border-radius: 5px;
				    background: #127DA7;
				    color: #fff;
				    cursor: pointer;
				    font-family: 'PT Sans Narrow', sans-serif;
				    margin-left: auto;
    				margin-top: 12px;
    				margin-bottom: 15px;
				    display: inline-block;
		        }
		    </style>
	    </c:if>
		<link rel="stylesheet" href="css/all.css" type="text/css" media="screen">
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
		<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
		<link href="css/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
		<script type="text/javascript" src="js/tablecloth.js"></script>
		<!-- end -->
		<style>
			body { margin:0; padding:0; background:#f1f1f1; font:70% Arial, Helvetica, sans-serif; color:#555; line-height:150%; text-align:left; }
			a { text-decoration:none; color:#057fac; }
			a:hover { text-decoration:none; color:#999; }
			h1 { font-size:140%; margin:0 20px; line-height:80px; }
			h2 { font-size:120%; }
			p.sig { margin:0 auto; width:680px; padding:1em 0; }
			form { margin:1em 0; padding:.2em 20px; background:#eee; }
			.eidtInput{border: 0px;width: 100%;background-color: transparent;}
			.eidtInput::-webkit-input-placeholder{color:#333}
		</style>
		<script>
			function changeEdit(edit){
				$("#eidtFrame").attr("src",edit);
			}
			function deleteEdit(btn){
				//获取id
				var modelId = $(btn).parent("td").parent("tr").attr("modelId");
				//获取model
				var model = $("table").attr("model");
				//构建对象
				var data=new Object();
				data.model=model;
				data.id=modelId;
				//往后台发送改变数据
				$.ajax({url:"DeleteAdmin.action",type:"POST",data:{change:JSON.stringify(data)},
    				success:function(msg){
    					if(msg.jsonObject.success==true){
    						window.location.reload();
    					}else{
    						alert("删除失败，请检查关联关系");
    					}
    				}
    			});
			}
			$(function() {
				$(".carousel-control").click(function() {
					if ($(this).attr("data-slide") == 'prev') {
						if ($(".item.inshow").prev(".item").length == 0) {
							//不存在前一个item
							$(".item:last").addClass("next");
						} else {
							//存在前一个item
							$(".item.inshow").prev(".item").addClass("next");
						}
					} else {
						if ($(".item.inshow").next(".item").length == 0) {
							//不存在后一个item
							$(".item:first").addClass("next");
						} else {
							//存在后一个item
							$(".item.inshow").next(".item").addClass("next");
						}
					}
					$(".item.next").css("display","block");
					$(".item.inshow").css("display","none");
					$(".item.inshow").removeClass("inshow");
					$(".item.next").removeClass("next").addClass("inshow");
				});
				//禁用td:first-of-type 编辑模式
				$("td:first-of-type input").attr('readonly','true');
				$("input").on("blur",function(){
					$(this).removeClass('right');
				});
				//给input添加事件：退出编辑时提交新内容到后台进行修改（暂时不管有没有改动）
				$("input").on("change",function(){
					//获取id
					var modelId = $(this).parent("td").parent("tr").attr("modelId");
					//获取当前数据以及fieldName
					var modelFieldName = $(this).parent("td").attr("modelFieldName");
					var value = $(this).val();
					//获取model
					var model = $("table").attr("model");
					//构建对象
					var data=new Object();
					data.model=model;
					data.id=modelId;
					data.fields=modelFieldName;
					data.values=value;
					//往后台发送改变数据
					$.ajax({url:"ChangeAdmin.action",type:"POST",data:{change:JSON.stringify(data)},
	    				success:function(msg){
	    					if(msg.jsonObject.success==true){
	    						$("tr[modelId=" + modelId + "] td[modelFieldName="+ modelFieldName +"] input").addClass("right");
	    					}else{
	    						$("tr[modelId=" + modelId + "] td[modelFieldName="+ modelFieldName +"] input").addClass("error");
	    					}
	    				}
	    			});
				});
				$("#addModel").click(function(){
					//往后台发送改变数据
					$.ajax({url:$(this).attr("addUrl"),type:"POST",
	    				success:function(msg){
	    					window.location.reload();
	    				}
	    			});
				});
			});
			function closeDiv(){
	        	$("#eidtDiv").hide();
	        	richEditNow.removeClass('right');
	        	richEditNow=null;
	        }
	        var richEditNow;
	        function acceptRichEdit(){
	        	richEditNow.val($('.froala-element.not-msie.f-basic')[0].innerHTML);
	        	richEditNow.trigger("change");
	        	console.log($('.froala-element.not-msie.f-basic')[0].innerHTML);
	        	closeDiv();
	        }
		</script>
	</head>
	<body class="index" style="zoom: 1;">
		<c:if test="${adcg.model=='article'||adcg.model=='product' }">
			<!-- 给文章和产品设定一个富文本编辑器,这种写法很LOW逼.不过··算了简单有效就好 -->
			<div id="eidtDiv" style="position: absolute;width: 90%;height: 90%;left: 5%;background:white;z-index: 1;overflow: scroll;display:none">
				<section id="editor" style="width:80%;height:100%">
					<div id='edit' style="margin-top: 30px;">
				        <img class="fr-fir" src="img/old_clock.jpg" alt="Old Clock" width="300"/>
				
				        <h1>Click and edit</h1>
				
				        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
				
				        <p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
				
				        <p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
				    </div>
				    <button class="control" onclick="acceptRichEdit()">确定</button>
				    <button class="control" onclick="closeDiv()">撤销</button>
				</section>
				
				<script src="js/libs/jquery-1.11.1.min.js"></script>
				<script src="js/froala_editor.min.js"></script>
				<script src="js/plugins/tables.min.js"></script>
				<script src="js/plugins/lists.min.js"></script>
				<script src="js/plugins/colors.min.js"></script>
				<script src="js/plugins/media_manager.min.js"></script>
				<script src="js/plugins/font_family.min.js"></script>
				<script src="js/plugins/font_size.min.js"></script>
				<script src="js/plugins/block_styles.min.js"></script>
				<script src="js/plugins/video.min.js"></script>
				<script>
			      $(function(){
			          //$('#edit').editable({inlineMode: false, alwaysBlank: true});
			           $('#edit').editable({
			              inlineMode: false, alwaysBlank: true,
			              language: "zh_cn",
			              imageUploadURL: 'uploadImg.action',//上传到本地服务器
			              imageUploadParams: {id: "edit"},
			              imageDeleteURL: 'lib/delete_image.php',//删除图片
			              imagesLoadURL: 'lib/load_images.php'//管理图片
			            }).on('editable.afterRemoveImage', function (e, editor, $img) {
			            	console.log($img);
			               // Set the image source to the image delete params.        
			               editor.options.imageDeleteParams = {src: $img.attr('src')};
			           });
			          //articleContext、info添加点击时间
			          $('td[modelfieldname=articleContext] input').on('click',richInput);
			          $('td[modelfieldname=info] input').on('click',richInput);
			          function richInput(){
			          	$("#eidtDiv").show();
			          	richEditNow=$(this);
			          	$('.froala-element.not-msie.f-basic')[0].innerHTML=$(this).val();
			          	//$('.froala-element.not-msie.f-basic')[0].innerHTML;
			          }
			      });
			 	</script>
			</div>
		</c:if>
		<div style="position:relative;width:100%;">
			<table model="${adcg.model }" cellspacing="0" cellpadding="0">
		      <tr>
		      	<c:forEach items="${adcg.fields }" var="field">
			        <th>${field.substring(0,field.indexOf('.')==-1?field.length():field.indexOf('.')) }</th>
		      	</c:forEach>
		      	<th>操作啦~</th>
		      </tr>
		      <c:forEach items="${adcg.values }" var="values">
	           <tr modelId="${values[0] }">
	           	<c:forEach items="${values }" var="value" varStatus="varStatus">
	        	 <td modelFieldName="${adcg.fields.get(varStatus.index) }"><input class="eidtInput" value='${value }'/></td>
	           	</c:forEach>
	           	<td style="text-align: center;"><button onclick="deleteEdit(this)" alt="删除" style="position:relative;right:4px;width:25px;height:25px;" class="delete"></button></td>
		       </tr>
		      </c:forEach>
		      <tr><td></td><td colspan="${adcg.fields.size()-1 }" style="text-align:center"><div id="addModel" addUrl="AddAdmin.action?&model=${adcg.model }">ADD</div><td></td></td></tr>
		    </table>
		    <footer class="clearfix" style="position: fixed;bottom: 5px;right: 25px;">
				<div style="float:right; clear:none;" class="pager">
					${page }/${pageCount } 
					<c:if test="${page>1 }">
						<a href="EnterAdmin.action?model=${adcg.model }">
							<i class="icon-step-backward" title="首页"></i> 
						</a>
					</c:if>
					<c:if test="${page==1}">
						<i class="icon-step-backward" title="首页"></i> 
					</c:if>
					<c:if test="${page>1 }">
						<a href="EnterAdmin.action?model=${adcg.model }&page=${page-1}">
							<i class="icon-play icon-rotate-180" title="上一页"></i> 
						</a>
					</c:if>
					<c:if test="${!(page>1) }">
						<i class="icon-play icon-rotate-180" title="上一页"></i> 
					</c:if>
					<c:if test="${page<pageCount }">
						<a href="EnterAdmin.action?model=${adcg.model }&page=${page+1}">
							<i class="icon-play" title="下一页"></i> 
						</a>
					</c:if>
					<c:if test="${page==pageCount }">
						<i class="icon-play" title="下一页"></i> 
					</c:if>
					<c:if test="${page<pageCount }">
						<a href="EnterAdmin.action?model=${adcg.model }&page=${pageCount}">
							<i class="icon-step-forward" title="末页"></i> 
						</a>
					</c:if>
					<c:if test="${page==pageCount }">
						<i class="icon-step-forward" title="末页"></i> 
					</c:if>
				</div>
			</footer>
		</div>
	</body>
</html>
